<template>
  <div class="book_show">
    <BookCard 
        :id="bookData.id"
        :title="bookData.title"
        :coverImageUrl="bookData.coverImageUrl"
        :authorId="bookData.authorId"
        :likes="bookData.likes"
        :favorites="bookData.favorites"
        :views="bookData.views"
        :status="bookData.status"
        :publishDate="bookData.publishDate"
        :lastUpdateDate="bookData.lastUpdateDate"
        :wordCount="bookData.wordCount"
        :rating="bookData.rating"
        :summary="bookData.summary"
        :category="bookData.category"
        :commentsCount="bookData.commentsCount"
        :price="bookData.price"
        :latestChapter="bookData.latestChapter"
        :tags="bookData.tags"
      />
    <el-button class="back" @click="handleClickBack()"><el-icon><ArrowLeft /></el-icon>返回</el-button>
    <bookMidNavbar />
  </div>
</template>
  
<script setup lang="ts">
import BookCard from './components/book_card.vue';
import bookMidNavbar from './components/bookMidNavbar.vue';
import { onMounted, ref } from 'vue';
import axios from 'axios';
import { useRoute } from 'vue-router'; // 引入 vue-router 来获取参数
import router from '@/router';
const route = useRoute();
const bookId = ref(route.params.id); // 获取URL中的章节ID

// 模拟数据
const bookData2 = {
  id: 1,
  title: "宿命之环",
  coverImageUrl: "http://bookcover.yuewen.com/qdbimg/349573/1036370336/600.webp",
  authorId: 23381,
  likes: 109000,
  favorites: 95615,
  views: 3102900,
  status: "连载中",
  publishDate: "2023-09-09",
  lastUpdateDate: "2024-09-09",
  wordCount: 3102900,
  rating: 4.9,
  summary: "心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血!",
  category: "玄幻",
  commentsCount: 1090000,
  price: 0,
  latestChapter: 89,
  tags: [
    "玄幻",
    "都市",
    "穿越",
    "修真",
    "穿越"
  ]
};
const bookData = ref(bookData2)

const handleClickBack = () => {
  window.history.go(-1);
}

onMounted(() => {
  window.scrollTo(0, 0);
  axios.get(`/api/books/${bookId.value}`)
    .then(response => {
      bookData.value = response.data.data;
      console.log(response.data);
    })
    .catch(error => {
      console.error(error);
    });
});
</script>
  
<style scoped>
.book_show {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color:  var(--bTextColor);
  margin-top: 60px;

  display: grid;
  place-items: center;
  /* 水平和垂直居中 */

}

.back {
  cursor: pointer;
  position: absolute;
  left: 15%;
  top: 12%;
}

.back:hover {
  filter: brightness(0.8) contrast(1.2);
}
</style>
  